<template>
  <div class="preciseSetting">
    <div class="preciseSetting_title">
      <span style="margin-right:10px">药品关键字:</span>
      <span><el-input v-model="input" style="width:15%" placeholder="请输入内容" /></span>
      <span style="margin-right:10px;margin-left:10px">生产企业关键字:</span>
      <span><el-input v-model="input1" style="width:15%" placeholder="请输入内容" /></span>
      <span style="margin-right:10px;margin-left:10px">生产批号:</span>
      <span><el-input v-model="input1" style="width:15%" placeholder="请输入内容" /></span>

      <div style="text-align:right;margin: 10px 0px;padding-right:10px">
        <el-button type="primary">比对</el-button>
      </div>
    </div>

    <div class="preciseSetting_body">
      <div class="preciseSetting_body_title">
        <div style="flex:1">比对结果</div>
        <div style="flex:1;text-align:right;padding-right:10px">
          <el-button type="primary">导出</el-button>
        </div>
      </div>
      <div style="display:flex;margin-top:10px;font-size:12px">
        <div style="flex:1"> 比对时间：2021-04-01</div>
        <div style="flex:1">比对数量：4</div>
      </div>
      <div class="table">
        <vxe-table
          border
          stripe
          resizable
          highlight-hover-row
          height="400"
          :loading="loading"
          :checkbox-config="{labelField: 'id', highlight: true, range: true}"
          :data="tableData"
        >
          <vxe-table-column type="seq" width="60" />
          <vxe-table-column field="name" min-width="150" title="药店名称" sortable show-overflow />
          <vxe-table-column field="sex" title="所在区域" :filters="sexList" :filter-multiple="false" :formatter="formatterSex" />
          <vxe-table-column
            field="age"
            title="药品名称"
            sortable
          />
          <vxe-table-column field="address" title="药品关键字" show-overflow />
          <vxe-table-column field="address" title="批准文号" show-overflow />
          <vxe-table-column field="address" title="生产批号" show-overflow />
          <vxe-table-column field="address" title="生产企业" show-overflow />
          <vxe-table-column field="address" title="生产企业关键字" show-overflow />
          <vxe-table-column field="address" title="进货数量" show-overflow />
          <vxe-table-column field="address" title="进货日期" show-overflow />
          <vxe-table-column field="address" title="状态" show-overflow />
          <vxe-table-column
            fixed="right"
            min-width="30"
            title="操作"
          >
            <template #default="{ row }">
              <span style="color:#1492ff;font-size:12px;cursor:pointer">移除</span>
              <span style="margin-left:10px;color:#1492ff;font-size:12px;cursor:pointer" @click="compare">模糊比对</span>
            </template>
          </vxe-table-column>

        </vxe-table>

      </div>
    </div>
  </div>
</template>

<script>
const cityOptions = ['药品名称', '批号', '生产企业'];
export default {
  data() {
    return {
      input1: '',
      input: '',
      loading: false,
      tableData: [],
      sexList: [
        { label: '女', value: '0' },
        { label: '男', value: '1' }
      ],
      options: [{
        value: '每天',
        label: '每天'
      }, {
        value: '每周',
        label: '每周'
      },
      {
        value: '每月',
        label: '每月'
      }
      ],
      value: '',
      checkAll: false,
      checkedCities: [],
      cities: cityOptions,
      isIndeterminate: true
    };
  },
  created() {
    this.loading = true;
    setTimeout(() => {
      this.tableData = [
        { name: '诸暨市上联村文均大药房', role: '诸暨市', sex: '桂龙咳喘宁片', age: 28, address: '28' },
        { name: '绍兴市越城区西药店有限公司', role: '越城区', sex: '活血止痛片', age: 22, address: '2' },
        { name: '上虞市丰惠镇平价大药房', role: '上虞市', sex: '更年安胶囊', age: 32, address: '4' },
        { name: '诸暨市上联村文均大药房', role: '嵊州市', sex: '婴儿健脾散', age: 23, address: '33' }

      ];
      this.loading = false;
    }, 500);
  },
  methods: {
    compare() {
      console.log('我是模糊对比');
    },
    saveLook() {
      this.$message.success('保存成功');
    },
    handleCheckAllChange(val) {
      this.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    formatterSex({ cellValue }) {
      const item = this.sexList.find(item => item.value === cellValue);
      return item ? item.label : '';
    },
    filterAgeMethod({ value, row, column }) {
      return row.age >= value;
    }
  }

};
</script>

<style lang='scss' scoped>
    .preciseSetting{
      padding:10px
    }
    .preciseSetting_title{
        background-color: #fff;
        padding: 10px;
        border-radius: 5px;
    }
    .preciseSetting_body{
       background-color: #fff;
       padding: 10px;
       border-radius: 5px;
       margin-top: 10px
    }
    .search{
    font-size: 18px;
    color: black;
    border-bottom: 1px solid #b5b0b0;
    margin-bottom: 10px;
    padding-bottom: 5px;
    }
    .preciseSetting_body_title{
    font-size: 18px;
    color: black;
    display: flex
    }
    .table{
      margin-top: 10px
    }

</style>
